<template>
  <div class="Popup-detail-container">
    <div class="header-button" v-if="note?.user_id !== userStore.user">
      <span class="revoke">要墙主撕下该便签</span>
      <span class="report">举报</span>
    </div>
    <div class="header-button" v-else>
      <span class="delete" @click="deleteNote(note?.id!)">撕掉</span>
    </div>
    <div class="card">
      <NoteCard width="340px" :note="note!" @child-event="parentMethod"></NoteCard>
      <textarea
        v-model="comment.comment"
        class="textarea"
        maxlength="104"
        placeholder="请输入..."
      ></textarea>
      <div class="name">
        <input v-model="comment.user_name" type="text" class="name-input" placeholder="签名" />
        <Button class="btn" width="90px" :disabled="true" @click="submitComment">评论</Button>
      </div>
    </div>
    <div class="commont">
      <span class="title">评论 {{ note?.comment_count }}</span>
      <div class="commont-list">
        <div class="commont-item" v-for="item in commentList" :key="item.id">
          <div class="avatar">
            <img v-if="item.avatar_url" :src="item.avatar_url" alt="" />
          </div>
          <div class="commont-right">
            <div class="right-top">
              <span class="name">{{ item.user_name }}</span>
              <span class="time">{{ formaDate(item.create_time) }}</span>
              <div
                class="del"
                v-if="item.user_id === userStore.user"
                @click="deleteComment(item.id)"
              >
                删除
              </div>
            </div>
            <div class="commont-content">{{ item.comment }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NoteCard from '../NoteCard.vue'
import Button from '../Button.vue'
import moment from 'moment'
import { usePopupStore } from '@/stores/modules/Popup'
import { useUserStore } from '@/stores/modules/user'
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { bus } from '@/utils/mitt'

import {
  addCommentAPI,
  deleteCommentAPI,
  deleteNoteAPI,
  getCommentListAPI,
  getDetailNoteAPI
} from '@/api/note'
/** 初始化弹窗仓库 */
const popupStore = usePopupStore()
/** 初始化用户仓库 */
const userStore = useUserStore()
// 处理日期
const formaDate = (date: string) => {
  return moment(date).format('MM/DD HH:mm')
}
/** 笔记详情 */
const note = ref<Note>()
/** 获取信息详情 */
const getDetailNote = async () => {
  if (popupStore.card === 0) return
  const res = await getDetailNoteAPI(popupStore.card!)
  note.value = res.data
}
/** 获取评论数量 */
const limit = ref<number>(10)
/** 获取评论页码 */
const page = ref<number>(1)
/** 评论列表 */
const commentList = ref<Comment[]>()
/** 获取评论列表 */
const getCommentList = async () => {
  if (popupStore.card === 0) return
  const res = await getCommentListAPI(popupStore.card!, limit.value, page.value)
  commentList.value = res.data
}
/** 删除留言 */
const deleteNote = async (id: number) => {
  await deleteNoteAPI(id)
  bus.emit('getNoteList')
  popupStore.close()
}
/** 评论数据 */
const comment = reactive<AddComment>({
  wall_id: note.value?.id!,
  user_id: userStore.user as string,
  user_name: '',
  avatar_url: '',
  comment: '',
  comment_count: note.value?.comment_count as number
})
/** 评论提交 */
const submitComment = async () => {
  Object.assign(comment, {
    wall_id: note.value?.id!,
    user_id: userStore.user as string,
    comment_count: note.value?.comment_count as number
  })

  if (!comment.comment) {
    return alert('请输入评论内容')
  }
  if (!comment.user_name) {
    comment.user_name = '匿名'
  }
  await addCommentAPI(comment)
  bus.emit('getNoteList')
  Object.assign(comment, {
    user_name: '',
    avatar_url: '',
    comment: ''
  })
  getCommentList()
  if (note.value) {
    note.value.comment_count = note.value?.comment_count + 1
  }
}
/** 删除评论 */
const deleteComment = async (id: number) => {
  await deleteCommentAPI(id, note.value?.comment_count!, note.value?.id!)
  if (note.value) {
    note.value.comment_count = note.value?.comment_count - 1
  }
  bus.emit('getNoteList')
  getCommentList()
}
const parentMethod = () => {
  getDetailNote()
}

watch(popupStore, () => {
  getDetailNote()
  getCommentList()
})

bus.on('getDetailNote', () => {
  getDetailNote()
})

onMounted(async () => {
  getDetailNote()
  getCommentList()
})

onBeforeUnmount(() => {
  bus.off('getNoteList')
})
</script>

<style scoped lang="scss">
.Popup-detail-container {
  .header-button {
    width: 100%;
    border: 0;
    display: flex;
    align-items: center;

    .revoke {
      color: #3b73f0;
      padding-right: 30px;
      cursor: pointer;
    }

    .report {
      color: #ff9e55;
      cursor: pointer;
    }

    .delete {
      text-align: right;
      width: 100%;
      cursor: pointer;
      justify-content: right;
      color: #fe1212;
    }
  }

  .card {
    border: 0;
    width: 100%;
    margin-top: 10px;

    .textarea {
      resize: none;
      width: 100%;
      padding: 8px;
      height: 56px;
      border: 1px solid $gray-2;
      background: transparent;
      margin: 10px 0;
      color: $gray-0;

      &:focus {
        border: 1px solid $gray-0;
      }
    }

    .name {
      display: flex;
      justify-content: space-between;

      .name-input {
        border: 1px solid $gray-2;
        background: transparent;
        width: 220px;
        height: 36px;
        padding: 8px;
        color: $gray-0;

        &:focus {
          border: 1px solid $gray-0;
        }
      }
    }
  }

  .commont {
    margin-top: 18px;

    .title {
      font-weight: 600;
      font-size: 15px;
    }

    .commont-list {
      margin-top: 12px;

      .commont-item {
        margin: 30px 0;
        min-height: 80px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;

        .avatar {
          border-radius: 50%;
          height: 36px;
          width: 36px;
          background-image: linear-gradient(180deg, #7be7ff 2%, #1e85e2);
        }

        .commont-right {
          flex: 0.95;
          display: flex;
          flex-direction: column;

          .right-top {
            display: flex;

            .name {
              font-weight: 600;
            }

            .time {
              color: $gray-2;
              font-size: 13px;
              padding: 0 10px;
            }

            .del {
              margin-left: auto;
              color: #f12100;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
